<template>
<div class="box">
    <div class="top"><span>用户管理</span>/用户评论</div>
      <div class="inp">
        <span>片区名称</span>
        <el-select
          v-model="value1"
          class="m-2"
          placeholder="全部"
          size="small"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <span>评论星级</span>
        <el-select
          v-model="value2"
          class="m-2"
          placeholder="全部"
          size="small"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button
          type="primary"
          round
          @click="shaixuan"
          style="
            width: 85px;
            height: 25px;
            border-radius: 8px;
            margin-left: 146px;
          "
          >筛选</el-button
        >

        <el-input
          v-model="input3"
          class="w-50 m-2"
          size="small"
          placeholder="请输入关键字"
          style="width: 300px; height: 24px; margin-left: 60px"
          :suffix-icon="Search"
          @blur="search"
        />
      </div>

     <main>
   
     
      <div class="mod" v-for="item in table">
        <div class="icon"> 
      <el-icon style="margin-right: 10px;color:lightgray;font-size: 20px; " ><RemoveFilled /></el-icon><el-icon style="margin-right: 10px;color: dimgrey;font-size: 20px; "><MoreFilled /></el-icon></div>
        <div class="img"> <img :src="item.img" alt="" style="border-radius: 50px;">
        
        <span style="font-weight: bolder;">{{ item.name }}</span></div>
        <div class="xing">    
            <el-rate
    v-model="item.id"
    disabled
    text-color="#ff9900"
    size="large"
    style="margin-right: 100px;"
  />

  <span>{{ item.time }}</span></div>


   <div class="size">{{ item.comments }}</div>

      </div>
    
     </main>


    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import axios from "axios";
import "@/mock/comment";
const value1 = ref("");
const value2 = ref("");
const input3 = ref("");

const table:any = ref([])
const options1 = [
  {
    value: "上城区",
    label: "上城区",
  },

  {
    value: "西湖区",
    label: "西湖区",
  },
  {
    value: "拱墅区",
    label: "拱墅区",
  },
  {
    value: "下沙区",
    label: "下沙区",
  },
];
const options2 = [
  {
    value:  1,
    label: "三星级",
  },
  {
    value: 2,
    label: "四星级",
  },
  {
    value: 3,
    label: "五星级"
  },
];


onMounted(() => {
  getData();
  getpull()
});
const getpull = () => {
  axios.post("/api/comment/sousuo", {
    city:value1.value ,dengji:value2.value,name:input3.value
  }).then((res) => {
    console.log(res.data);
   table.value = res.data.result
    
  });
}
const getData = () => {
  axios.post("/api/comment", {
    city:value1.value ,dengji:value2.value,name:input3.value
  }).then((res) => {
    console.log(res.data);
   table.value = res.data.result
    
  });
};
const shaixuan = () =>{
  getData()
}
const search = () =>{
  getpull()
}
</script>
<style lang="less" scoped>
.top span {
  color: #888888;
}
.top {
  font-size: 12px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  line-height: 21px;
  margin-bottom: 20px;
  margin-left: 16px;
  margin-top: 16px;
  
 
}
.box {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
  font-weight: bold;
}
:deep(.el-input__wrapper) {
  width: 151px;
  background-color: #f6f6f6;
  border-radius: 22px;
  margin-left: 16px;
  margin-right: 33px;
}
:deep(.el-input__inner) {
  font-size: 12px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #888888;
  line-height: 21px;
}
.inp {
  padding-left: 17px;
  position: relative;
 padding-bottom: 30px;
   background-color: #fff;
padding-top: 30px;
border-radius: 10px;
margin-left: 10px;
margin-right: 10px;
}
.el-pagination{
  margin-top: 20px;
  float: right;
  margin-bottom: 20px;

}
.sousuo{
  position: absolute;
  top: 36px;
  left: 1665px ;
}
main {
 
  height:100%;
  margin: 10px 10px 10px 20px;
  display: flex;
  flex-wrap: wrap;
 
}
.mod{
  background: #ffffff;
  width: 31%;
  height: 300px;
  margin: 10px;
  border-radius: 10px;
  padding: 32px 44px;
position: relative;
font-weight: bolder;
}
.size{
  font-size: 12px;
font-family: Adobe Heiti Std;
font-weight: normal;
color: #888888;
line-height: 21px;
margin-top: 40px;
width: 300px;
}
.img{
  width: 100px;
  font-size: 14px;
font-family: Adobe Heiti Std;
font-weight: normal;
color: #555555;
line-height: 21px;
text-align: center;
}
.xing{
  position: absolute;
  left: 200px;
  top: 60px;
  font-size: 14px;
font-family: Consolas;
font-weight: 400;
color: #888888;
line-height: 21px;
}
:deep(.el-rate__icon){
  font-size: 30px;
}
.icon{
  position: absolute;
  right: 10px;
  bottom: 10px;
}
</style>